<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>操作DOM</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 15px;
    }
    .box span {
      color: #ffffff;
    }
  </style>
</head>
<body>
  <div class="box"><span>哈哈</span></div>
  <script>
    let box1 = document.querySelector('.box');
    // 克隆第一份(深克隆)
    let box2 = box1.cloneNode(true);
    box2.querySelector('span').innerText = 'box2';
    // 克隆第二份(浅克隆)
    let box3 = box1.cloneNode(false);
    document.body.appendChild(box2);
    document.body.appendChild(box3);

    document.body.removeChild(box2);
  </script>
</body>
</html>